import React, { Component } from 'react';

class FormMultiView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            phone: '',
            password: ''
        };
        this.onInputChange = this.onInputChange.bind(this);
        this.onSubmitHandle = this.onSubmitHandle.bind(this);
    }

    onInputChange(event) {
        console.log('onInputChange:', event.target.name);
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    onSubmitHandle(event) {
        console.log('onSubmitHandle:', this.state);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.onSubmitHandle}>
                <div>
                    手机号：
                    <input type="number" name="phone" value={this.state.phone} onChange={this.onInputChange}/>
                </div>
                <div>
                    密码：
                    <input type="password" name="password" value={this.state.password} onChange={this.onInputChange}/>
                </div>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

export default FormMultiView;